<template>
  <div class="container clearfix">
    <div class="filter">
      <div class="section">
        <span class="tip">
          用户姓名
        </span>
        <div class="content">
          <el-input v-model="search_form.realname"
                    placeholder="请输入用户姓名"></el-input>
        </div>
      </div>
      <div class="section">
        <span class="tip">
          用户手机号
        </span>
        <div class="content">
          <el-input v-model="search_form.username"
                    placeholder="请输入手机号"></el-input>
        </div>
      </div>
      <div class="section">
        <span class="tip">
          发货状态
        </span>
        <el-select v-model="search_form.shipStatus"
                   placeholder="请选择">
          <el-option v-for="item in shipStatus_arr"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </div>
<!--      <div class="section">-->
<!--        <span class="tip">-->
<!--          支付状态-->
<!--        </span>-->
<!--        <el-select v-model="search_form.shipStatus"-->
<!--                   placeholder="请选择">-->
<!--          <el-option v-for="item in payStatus_arr"-->
<!--                     :key="item.value"-->
<!--                     :label="item.label"-->
<!--                     :value="item.value">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </div>-->
      <div class="btn-bar">
        <el-button type="primary" plain icon="el-icon-search" @click="search()">查询</el-button>
        <el-button type="primary" plain  @click="handleDownload()" :loading="downloadLoading">导出</el-button>
        <el-button type="primary" plain class="el-icon-refresh" @click="reset()">重置</el-button>
      </div>
    </div>
    <div class="data-table">
      <el-table :data="tableData" border height="660" align="center" style="width: 100%" v-loading="table_loading">
        <el-table-column prop="payOrderNum" align="center" label="订单编号"></el-table-column>
        <el-table-column prop="goodName" align="center" label="商品名称"></el-table-column>
        <el-table-column prop="realname" align="center" label="用户姓名"></el-table-column>
        <el-table-column prop="username" align="center" label="手机号"></el-table-column>
        <el-table-column prop="receiver" align="center" label="收货人姓名"></el-table-column>
        <el-table-column prop="telNumber" align="center" label="收货人手机号"></el-table-column>
        <el-table-column prop="address" align="center" label="收货地址"></el-table-column>
        <el-table-column prop="payTime" align="center" label="支付时间"></el-table-column>
        <el-table-column prop="statusValue" align="center" label="支付状态"></el-table-column>
        <el-table-column prop="payAmount" align="center" label="支付金额"></el-table-column>
        <el-table-column prop="shipStatus" align="center" label="发货状态"></el-table-column>
        <el-table-column prop="trackingNum" align="center" label="物流单号"></el-table-column>
        <!-- <el-table-column fixed="right" label="操作" align="center" width="190">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="refund(scope.row)"  v-if="scope.row.shipStatus ==='未发货' && scope.row.status === 1">完成发货</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="block" >
      <el-pagination
        background
        :page-size="pageSize"
        :page-sizes="[10,20,50,100]"
        :pager-count="11"
        layout="total, sizes, prev, pager, next"
        :total="total"
        @current-change="change_page"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { downloadVipGoodsFile, exportVipGoodsFile } from '@/api/file'
  import { getVipOrderList, orderTrack } from '@/api/order'
  import { appType } from '@/utils/constanst'
export default {
  data () {
    return {
      value: true,
      table_loading: false,
      shipStatus_arr: [
        {
          value: '0',
          label: '未发货'
        },
        {
          value: '1',
          label: '已发货'
        },
        {
          value: '2',
          label: '确认收货'
        },
      ],
      payStatus_arr: [
        {
          value: '1',
          label: '已支付'
        }, {
          value: '0',
          label: '未支付'
        }
      ],
      total: 1,
      tableData: [],
      page: 1,
      pageSize: 10,
      search_form: {
        // 名称
        realname: null,
        // 手机号
        username: null,
        //发货状态
        shipStatus: null,
        //支付状态
        payStatus: null,
      },
      downloadLoading: false,
      filename:'开通会员订单'+ new Date().getTime(),
      autoWidth: true,
      bookType: 'xlsx',
      model: 0// 0 初次加载   1表示条件筛选
    }
  },//新加路由保存参数
  beforeRouteLeave(to, from, next) {
    // const answer = window.confirm("当前页面搜索条件将会被保存");
    //更新 put
    let keyname = this.$route.name;
    let value = JSON.stringify(this.search_form);
    sessionStorage.setItem(keyname, value);
    next();
  },
  mounted() {
    if (sessionStorage.getItem(this.$route.name)) {
      this.search_form = JSON.parse(sessionStorage.getItem(this.$route.name));
    }
    this.search()
  },
  methods: {
    // 筛选
    search() {
      this.model = 1
      this.get_list({
        'pageNum': this.page,
        'pageSize': this.pageSize,
        'realname': this.search_form.realname ? this.search_form.realname : null,
        'username': this.search_form.username ? this.search_form.username : null,
        'shipStatus': this.search_form.shipStatus ? parseInt(this.search_form.shipStatus) : null
      })
    },
    // 重置
    reset () {
      this.page = 1
      this.pageSize = 10
      this.search_form.realname = ''
      this.search_form.username = ''
      this.search_form.shipStatus = ''
      this.get_list()
    },
    // 获取列表
    get_list (options = {
      'pageNum': this.page,
      'pageSize': this.pageSize
    }) {
      this.table_loading = true
      getVipOrderList(options).then((result) => {
        let res = result.data
        if (res.code === 0) {
          res.data.list.forEach(item => {
            item.address = item.provinceName + item.cityName + item.countyName + item.detailInfo
          })
          this.tableData = res.data.list
          this.total = res.data.count
          this.table_loading = false
        }
      }).catch((err) => {
        this.table_loading = false
        //   this.$message.error('服务器网络错误，请稍后重试');
        this.$message.error(err)
      })
    },
    // 发货
    refund(row) {
      this.$prompt('请输入物流单号', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        orderTrack({
          id: row.id + '',
          trackingNum: value
        }).then((result) => {
          let res = result.data
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '发货成功!'
            })
            this.search()
          } else {
            this.$message.error(res.msg)
          }
        }).catch((err) => {
          this.$message.error('服务器网络错误，请稍后重试')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    //导出
    handleDownload(options = {
      'pageNum': this.page,
      'pageSize': 100000000,
      'realname': this.search_form.realname ? this.search_form.realname : null,
      'username': this.search_form.username ? this.search_form.username : null,
      'shipStatus': this.search_form.shipStatus ? parseInt(this.search_form.shipStatus) : null
      }) {
      this.downloadLoading = true
      this.table_loading = true
      getVipOrderList(options).then((result) => {
        let res = result.data
        if (res.code === 0) {
          this.table_loading = false
          import('../../components/ExportExcel').then(excel => {
            const tHeader = ['商品名称','用户姓名', '手机号', '收货人姓名', '收货人手机号','收货地址', '支付时间','支付状态', '支付金额', '发货状态', '物流单号']
            const filterVal = ['goodName', 'realname', 'username', 'receiver','telNumber','address','payTime','statusValue', 'payAmount','shipStatus','trackingNum']
            const list = res.data.list
            const data = this.formatJson(filterVal, list)
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: this.filename,
              autoWidth: this.autoWidth,
              bookType: this.bookType
            })
            this.downloadLoading = false
          })
        }
      }).catch((err) => {
        this.table_loading = false
        //   this.$message.error('服务器网络错误，请稍后重试');
        this.$message.error(err)
      })

    },
    //导出-数据处理
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'address') {
          return v.provinceName + v.cityName + v.countyName + v.detailInfo
        } else {
          return v[j]
        }
      }))
    },
    // 导出 ---弃用
    exports(options = {
      'pageNum': 1,
      'pageSize': this.pageSize,
      'realname': this.search_form.realname ? this.search_form.realname : null,
      'username': this.search_form.username ? this.search_form.username : null,
      'shipStatus': this.search_form.shipStatus ? parseInt(this.search_form.shipStatus) : null
    }) {
      // 调用生成导出文件接口
      exportVipGoodsFile(options).then((result) => {
        // 调用下载导出文件接口
        if (result.data.code === 0) {
          downloadVipGoodsFile( {
            'fileName': result.data.msg
          }, { responseType: 'arraybuffer' }).then((res) => {

            const blob = new Blob([res.data], { type: 'application/x-xlsx' })
            if (window.navigator.msSaveOrOpenBlob) {
              navigator.msSaveBlob(blob, fileName)
            } else {
              var link = document.createElement('a')
              link.href = window.URL.createObjectURL(blob)
              link.download = result.data.msg
              link.click()
              window.URL.revokeObjectURL(link.href)
            }

            if (res.data.code === 0) {
              this.$message.success(res.data.msg)
            } else {
              this.$message.error(res.data.msg)
            }
          })
        } else {
          this.$message.error(result.data.msg)
        }
      })
    },
    //页码改变
    change_page (page) {
      this.page = page
      this.search()
    },
    //条数改变
    handleSizeChange (page) {
      this.pageSize = page
      this.page = 1
      this.search()
    },
  },

}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .filter {
    margin: 20px;
    background-color: #fff;
    box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    .title {
      font-size: 16px;
    }
    .section {
      display: inline-block;
      vertical-align: middle;
      margin-right: 20px;
      margin-top: 16px;
      .tip {
        font-size: 14px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
      }
      .content {
        display: inline-block;
        vertical-align: middle;
      }
      .inp {
        display: inline-block;
        vertical-align: middle;
        border: none;
        outline: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 6px;
      }
    }
    .btn-bar {
      position: absolute;
      right: 160px;
      top: 35px;
    }
  }
  .data-table {
    margin: 20px;
    background-color: #fff;
    box-sizing: border-box;
  }
  .page-controller {
    float: right;
    margin-right: 20px;
  }
}
.block {
  background: #fff;
  padding: 32px 16px;
}
.progress{
    padding:15px 15px;
  }
</style>

